<script setup>
import { getProdTotalCountOfDate } from '@/api/visual/productionBoard'
import { $formatechartData, fontSize } from '@/utils/globalMethod.js'

const key = ref(1)

const dateList = ref([])
const goodList = ref([])
const badList = ref([])
const goodYieldList = ref([])
const loadData = async () => {
  const { data } = await getProdTotalCountOfDate({ date: 'week' })

  dateList.value = data.map(item => item.BillDate)
  goodList.value = data.map(item => item.GoodQty)
  badList.value = data.map(item => item.BadQty)
  goodYieldList.value = data.map(item => item.GoodYield)
}

const option = computed(() => ({
  title: {
    text: '工序近七日报工趋势',
    top: '5%',
    left: '2%',
    textStyle: {
      color: '#fff',
      fontSize: fontSize(0.16)
    }
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  legend: {
    top: '5%',
    right: '5%',
    textStyle: {
      color: '#ccc1c1'
    }
  },
  grid: {
    top: '20%',
    left: '5%',
    right: '5%',
    bottom: '10%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      data: dateList.value,
      axisLabel: {
        color: '#ccc1c1'
      }
    }
  ],
  yAxis: [
    {
      type: 'value',
      splitLine: {
        lineStyle: {
          color: '#2b2c33'
        }
      },
      axisLabel: {
        color: '#ccc1c1'
      }
    },
    {
      splitLine: { show: false },
      type: 'value',
      position: 'right',
      name: '',
      // interval: 10,
      min: 0,
      max: 1,
      // 改变y轴颜色
      axisLine: {
        lineStyle: {
          color: '#1f78af',
          width: 2 //y轴宽度，这里是为了突出显示加上的
        }
      }
    }
  ],
  series: [
    {
      name: '良品',
      type: 'bar',
      stack: 'Ad',
      emphasis: {
        focus: 'series'
      },
      itemStyle: {
        color: '#409eff'
      },
      label: {
        show: true,
        position: 'inside',
        formatter: ({ value }) => (value === 0 ? '' : value),
        color: '#fff'
      },
      data: goodList.value
    },
    {
      name: '不良品',
      type: 'bar',
      stack: 'Adaa',
      emphasis: {
        focus: 'series'
      },
      itemStyle: {
        color: '#F56C6C'
      },
      label: {
        show: true,
        position: 'top',
        formatter: ({ value }) => (value === 0 ? '' : value),
        color: '#fff'
      },

      data: badList.value
    },
    {
      name: '良品率',
      type: 'line',
      stack: 'Ads',
      data: goodYieldList.value,
      yAxisIndex: 1, // 这里要设置哪个y轴，默认是最左边的是0，然后1，2顺序来
      symbol: 'emptyCircle', // 折线点设置为实心点
      symbolSize: 5, // 折线点的大小
      itemStyle: {
        color: '#67c23a'
      }
    }
  ]
}))

const keyResize = () => {
  nextTick(() => {
    setTimeout(() => {
      key.value++
    }, 100)
  })
}
onMounted(loadData)
onMounted(() => {
  setTimeout(() => {
    key.value++
  }, 200)
  window.addEventListener('resize', keyResize)
})

onUnmounted(() => {
  window.removeEventListener('resize', keyResize)
})
</script>

<template>
  <div class="ps_w_h_100">
    <dv-border-box10 :key="key">
      <ps-chart2 :option="option"></ps-chart2>
    </dv-border-box10>
  </div>
</template>

<style scoped lang="scss"></style>
